import React from 'react';
import { Card, Button, Form, Select, Modal, message } from 'antd';
import RcTable from '@components/Table/Table.jsx';
import BaseForm from '@components/BaseForm/BaseForm.jsx';
import Requset from '@utils/request.js';
// import Utils from './../../utils/utils';
const FormItem = Form.Item;
const Option = Select.Option;

export default class City extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
          list: [],
          isShowOpenCity:false 
      };
      this.params = { page:1 }
      this.formList = [{
        type: 'SELECT',
        label: '城市',
        filter: 'city_id',
        width: 100,
        initialValue: '0',
        list: [{key: '0',name: '全部'}, {key: '1',name: '北京'}, {key: '2',name: '上海'}, {key: '3',name: '天津'}]
      }, {
        type: 'SELECT',
        label: '用车模式',
        filter: 'mode',
        width: 120,
        initialValue: '0',
        list: [{key: '0',name: '全部'}, {key: '1',name: '指定停车点模式'}, {key: '2',name: '禁停区模式'}]
      }, {
        type: 'SELECT',
        label: '营运模式',
        filter: 'op_mode',
        width: 100,
        initialValue: '0',
        list: [{key: '0',name: '全部'}, {key: '1',name: '自营'}, {key: '2',name: '加盟'}]
      }, {
        type: 'SELECT',
        label: '加盟商授权状态',
        filter: 'auth_status',
        width: 100,
        initialValue: '0',
        list: [{key: '0',name: '全部'}, {key: '1',name: '已授权'}, {key: '2',name: '未授权'}]
      }];
    }

    componentDidMount(){
        this.requestList();
    }

    // 默认请求我们的接口数据
    requestList = (info={})=>{
      Requset.axiosRes({
        url: '/citylist',
        method: 'post',
        data: {
          city: 1,
          mode: 1,
          op_mode: 1,
          status: 1,
          showLoading: true
        }
      }).then(res => {
        this.setState({
          list: res.content,
          isShowOpenCity:false
        })
      }, err => {
        console.log(err)
      })
    }

    // 开通城市
    handleOpenCity = ()=>{
        this.setState({
            isShowOpenCity:true
        })
    }
    // 城市开通提交
    handleSubmit = ()=>{
        let cityInfo = this.cityForm.props.form.getFieldsValue();
        console.log(cityInfo);
        this.requestList();
    }
    render(){
        const columns = [
            {
                title:'城市ID',
                dataIndex:'id'
            }, {
                title: '城市名称',
                dataIndex: 'name'
            }, {
                title: '用车模式',
                dataIndex: 'mode',
                render(mode){
                    return mode ==1 ?'停车点':'禁停区';
                }
            }, {
                title: '营运模式',
                dataIndex: 'op_mode',
                render(op_mode) {
                    return op_mode == 1 ? '自营' : '加盟';
                }
            }, {
                title: '授权加盟商',
                dataIndex: 'franchisee_name'
            }, {
                title: '城市管理员',
                dataIndex: 'city_admins',
                render(arr){
                    return arr.map((item)=>{
                        return item.user_name;
                    }).join(',');
                }
            }, {
                title: '城市开通时间',
                dataIndex: 'open_time'
            }, {
                title: '操作时间',
                dataIndex: 'update_time',
                // render: Utils.formateDate
            }, {
                title: '操作人',
                dataIndex: 'sys_user_name'
            }
        ]
        return (
            <div>
                <Card>
                    <BaseForm
                      formList={this.formList}
                      submitForm={(formInfo) => this.requestList(formInfo)}
                    />
                </Card>
                <Card style={{marginTop:10}}>
                    <Button type="primary" onClick={this.handleOpenCity}>开通城市</Button>
                </Card>
                <div className="content-wrap">
                    <RcTable
                        bordered
                        rowKey={ record => record.id }
                        columns={columns}
                        dataSource={this.state.list}
                        // pagination={false}
                    />
                </div>
                <Modal 
                    title="开通城市"
                    centered
                    visible={this.state.isShowOpenCity}
                    onCancel={()=>{
                        this.setState({
                            isShowOpenCity:false
                        })
                    }}
                    onOk={this.handleSubmit}
                >
                    <OpenCityForm wrappedComponentRef={(inst)=>{this.cityForm = inst;}}/>
                </Modal>
            </div>
        );
    }
}

// 弹框内容
class OpenCityForm extends React.Component{
    render(){
        const formItemLayout = {
            labelCol:{
                span:5
            },
            wrapperCol:{
                span:19
            }
        }
        const { getFieldDecorator }  =this.props.form;
        return (
            <Form layout="horizontal">
                <FormItem label="选择城市" {...formItemLayout}>
                    {
                        getFieldDecorator('city_id',{
                            initialValue:'1'
                        })(
                            <Select style={{ width: 100 }}>
                                <Option value="">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="营运模式" {...formItemLayout}>
                    {
                        getFieldDecorator('op_mode', {
                            initialValue: '1'
                        })(
                            <Select style={{ width: 100 }}>
                                <Option value="1">自营</Option>
                                <Option value="2">加盟</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="用车模式" {...formItemLayout}>
                    {
                        getFieldDecorator('use_mode', {
                            initialValue: '1'
                        })(
                            <Select style={{ width: 100 }}>
                                <Option value="1">指定停车点</Option>
                                <Option value="2">禁停区</Option>
                            </Select>
                        )
                    }
                </FormItem>
            </Form>
        );
    }
}
OpenCityForm = Form.create({})(OpenCityForm);